<template>
  <view class="video-player">
    <NavbarRight
      leftIconColor="#333333"
      bgColor="transparent"
      isBack
      :left="{ imageUrl: leftImageUrl, width: '48rpx' }"
    />
    <view class="background"> </view>
    <view class="content">
      <view class="video-content">
        <VideoView
          :src="fileUrl"
          width="686"
          height="386"
          border-radius="16"
          v-if="fileUrl"
        />
      </view>
      <view class="head">
        <view class="hot-info">
          <view class="hot-title ellipsis-3">
            {{ info.title }}
          </view>
          <view class="author">
            <!-- <text>作者：</text> -->
            <text>{{ info.subtitle }}</text>
          </view>
        </view>
      </view>
      <view class="article-body">
        <rich-text :nodes="info.content"></rich-text>
      </view>
    </view>
    <SubmitButton
      text="查看点评"
      :leftIcon="leftIcon"
      @handleClick="handleComment"
      v-if="readonly"
    ></SubmitButton>
    <BottomButtons
      cancelText="重新录制"
      confirmText="上传视频"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      v-else
    ></BottomButtons>
  </view>
</template>

<script setup>
import NavbarRight from "@/components/navbar-right/index.vue";
import SubmitButton from "@/components/submit-button/index.vue";
import BottomButtons from "@/components/bottom-buttons/index.vue";
import VideoView from "@/components/video-view";
import { onLoad, onUnload } from "@dcloudio/uni-app";

import { reactive, ref } from "vue";
import useRecorderStore from "@/store/recorder.js";
import { storeToRefs } from "pinia";
const recorderStore = useRecorderStore();
const { videoFile } = storeToRefs(recorderStore); // 响应式
const { saveVideoFile, removeVideoFile } = recorderStore; // actions
import { showToast } from "@/utils/common";
import { uploadFileH5 } from "@/utils/uploadFile";
import { getArticleInfo, saveReciteInfo } from "@/api/article";
import { getReciteInfo } from "@/api/records";
const leftIcon = ref("/static/images/article/video@3x.png");
const leftImageUrl = ref("/static/images/login/loginfanhui@3x.png");
const videoIcon = ref("/static/images/article/shipin@3x.png");
const id = ref("");
const info = ref({});
const fileUrl = ref("");
const form = reactive({
  articleId: "",
  video: "",
  emotion: "",
});
const readonly = ref(false);
const reciteId = ref("");
const editReciteId = ref("");

onLoad((options) => {
  if (options) {
    if (options.id) {
      id.value = options.id;
      form.articleId = options.id;
      getDetail();
    }
    if (options.readonly) {
      readonly.value = true;
    } else {
      fileUrl.value =
        (videoFile && videoFile.value && videoFile.value.path) || "";
    }
    if (options.readonly && options.reciteId) {
      reciteId.value = options.reciteId;
      getReciteDetail();
    }
    if (options.editReciteId) {
      editReciteId.value = options.editReciteId;
    }
    console.log("fileUrl.value", fileUrl.value);
  }
});
const getDetail = async () => {
  try {
    let res = await getArticleInfo({
      id: id.value,
    });
    info.value = res.data;
    console.log(info.value);
  } catch (e) {
    console.log(e);
    //TODO handle the exception
  }
};
const reciteInfo = ref({});
const getReciteDetail = async () => {
  try {
    let res = await getReciteInfo({
      id: reciteId.value,
    });
    reciteInfo.value = res.data;
    fileUrl.value = res.data.video;
    console.log(reciteInfo.value);
  } catch (e) {
    console.log(e);
    //TODO handle the exception
  }
};
const handleCancel = () => {
  uni.$emit("clear-video");
  uni.navigateBack();
};
const handleConfirm = () => {
  beforeUpload();
};
const beforeUpload = () => {
  uploadFile();
};
const uploadFile = async () => {
  console.log("uploadFile", videoFile.value);
  console.log(videoFile.value.tempFile);
  uni.showLoading({
    title: "正在上传",
  });
  try {
    let { code, path } = await uploadFileH5({
      url: "/article/recite/upload.php",
      data: {
        record: videoFile.value.tempFile,
      },
    });
    if (code === 0 && path) {
      form.video = path;
      saveRecite();
    } else {
      uni.hideLoading();
      showToast("上传失败");
    }
  } catch (e) {
    uni.hideLoading();
    console.log(e);
    //TODO handle the exception
  }
};
const saveRecite = async () => {
  try {
    let params = {};
    // 编辑
    if (editReciteId.value) {
      params = {
        reciteId: editReciteId.value,
        video: form.video,
      };
    } else {
      params = form;
    }
    let { code } = await saveReciteInfo(params);
    if (code === 0) {
      uni.hideLoading();
      showToast("上传成功", true);
      uni.$emit("records-list-refresh");
      setTimeout(() => {
        uni.reLaunch({
          url: "/pages/mine/records/records",
        });
      }, 1000);
    } else {
      uni.hideLoading();
      showToast("上传失败");
    }
  } catch (e) {
    uni.hideLoading();
    console.log(e);
    //TODO handle the exception
  }
};
const handleComment = () => {
  uni.$u.route({
    url: "/pages/article/evaluate/evaluate",
    params: {
      id: reciteId.value,
    },
  });
};
</script>

<style lang="scss" scoped>
.video-player {
  position: relative;
  height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;

  .background {
    width: 100%;
    height: 780rpx;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(180deg, #90e4ed 0%, #ffffff 100%);
  }

  .content {
    height: 100%;
    overflow: auto;
    position: relative;
    z-index: 10;
    padding: 48rpx 32rpx;
    padding-bottom: 128rpx;
    .video-content {
      width: 686rpx;
      height: 386rpx;
    }

    .head {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 80rpx;

      .records {
        position: relative;

        .cover-view {
          width: 100%;
          height: 686rpx;
          border-radius: 30rpx;
          position: relative;
          overflow: hidden;
        }
      }

      .hot-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 20rpx;

        .hot-title {
          font-size: 44rpx;
          font-weight: bold;
          color: #1a1a1a;
          line-height: 58rpx;
        }

        .author {
          font-size: 28rpx;
          color: #939999;
          line-height: 28rpx;
          margin-top: 20rpx;
        }
      }
    }
    .article-body {
      font-size: 28rpx;
      line-height: 44rpx;
      color: #939999;
      // height: 176rpx;
      // overflow-y: auto;
    }
    .audio-player {
      padding: 60rpx 0;
    }
  }
}
</style>
